// pages/index/index.tsx
import React, { useState } from 'react'
import { View, Text, ScrollView, Image } from '@tarojs/components'
import HeaderTitle from "@/components/HeaderTitle";
import { defaultUser, UserModel } from "@/shared/services/model/user";
import './index.scss'
import {CostOrderModel, OrderModel} from "@/shared/services/model/order";
import Taro from "@tarojs/taro";
import userService from "@/shared/services/user/user.service";
import EmptyView from "@/components/EmptyView";
import adminService from "@/shared/services/admin/admin.service";
import {getUserInfo} from "@/stores/userStore";

const Index: React.FC = () => {
  const [user, setUser] = useState<UserModel>(defaultUser)
  const [orderData, setOrderData] = useState<OrderModel[]>([])

  Taro.useLoad(async () => {

    let user = await getUserInfo()
    let req = { pageNum: 1, pageSize: 100,phone: user.phone }

    let result = await adminService.orderList(req)

    if(result.code == 0){
      setOrderData(result.data.orderList)
    }
  })
  // 判断是否有订单数据
  const hasOrders = orderData.length > 0

  return (
    <View className='order-page'>
      {/* Header */}
      <View className='order-header'>
        <HeaderTitle title={'我的订单'} />
      </View>

      {/* 订单列表 - 单独滚动区域 */}
      <View className='order-content'>
        {hasOrders ? (
          // 有订单时的布局结构
          <ScrollView
            className='order-scrollview'
            scrollY
            scrollWithAnimation
            enhanced
            showScrollbar={false}
          >
            <View className='order-list'>
              {orderData.map(item => (
                // 在订单项部分修改为：
                <View key={item.id} className='order-item'>
                  {/* 左侧图片 */}
                  <Image
                    src={require('@/assets/icon_product_cover.png')}
                    className='order-image'
                    mode='aspectFill'
                  />
                  {/* 右侧内容 */}
                  <View className='order-info'>
                    <View className='order-service'>男士理容</View>
                    <View className='order-details'>
                      <Text className='order-amount-label'>消费金额：</Text>
                      <Text className='order-amount'>￥{item.totalAmount}</Text>
                    </View>
                    {/*<Text className='order-no'>订单：{item.id}</Text>*/}

                    <View className='order-date'>{item.orderTime}</View>
                  </View>
                </View>
              ))}

              {/* 没有更多数据的提示 */}
              <View className='no-more-data'>
                <Text className='no-more-text'>暂时没有更多了</Text>
              </View>
            </View>
          </ScrollView>
        ) : (
          // 无订单时的布局结构
          <EmptyView>
          </EmptyView>
        )}

      </View>
    </View>
  )
}

export default Index
